<!DOCTYPE HTML>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
	<meta charset="UTF-8">
	<title>Dream Hotel</title>
	<link rel="stylesheet" href="css/style.css" type="text/css">
	<link rel="stylesheet" href="css/view.css" type="text/css">
	<link rel="stylesheet" href="css/tabs-no-images.css" type="text/css">
	<script type="text/javascript" src="javascript/view.js"></script>
	<script type="text/javascript" src="javascript/calendar.js"></script>
	<script type="text/javascript" src="javascript/jquery-2.0.3.min.js"></script>

	<script type="text/javascript">
	 $(function() {
	 	$("#search").click(function(e) {
	 		var arrival_query_chunk = "a_year=" + $("#arrival_year").val() + "&a_month=" + $("#arrival_month").val() + "&a_day=" + $("#arrival_day").val();
	 		var departure_query_chunk = "d_year=" + $("#departure_year").val() + "&d_month=" + $("#departure_month").val() + "&d_day=" + $("#departure_day").val();
	 		var rooms = "rooms=" + $("#rooms").val();
	 		var guests = "guests=" + $("#guests").val();
	 		document.location.href = "booking_result.html?" + arrival_query_chunk + "&" + departure_query_chunk + "&" + rooms + "&" + guests;
	 	});
	 });
	</script>
</head>
<body>
	<div id="header">
		<div class="clearfix">
			<div class="logo">
				<a href="index.html"><img src="images/logo.jpg" alt="LOGO" height="85" width="250"></a>
			</div>
			<ul class="css-tabs">
				<li>
					<a href="contact.html">Contact Us</a>
				</li>
				<li>
					<a href="local_attractions.html">Local Attractions</a>
				</li>
				<li>
					<a href="facilities.html">Facilities</a>
				</li>
				<li class="active">
					<a href="index.html">Home</a>
				</li>
			</ul>
		</div>
	</div>
	<div id="contents">
		<div id="adbox">
			<div class="clearfix">
				<img src="images/banner.jpg" alt="Img" height="382" width="956" id="banner">
				<form>
					<div id="bookingform">
						<table>
							<tr>
								<td class="form_label">Arrival Date</td>
								<td class="form_label">Departure Date</td>
							</tr>
							<tr>
								<td>
									<span class="creamyfont">
										<input id="arrival_month" name="element_1_1" class="element text" size="1" maxlength="2" value="" type="text"> / 
										<label for="element_1_1" class="creamyfont">MM</label>
									</span>
									<span class="creamyfont">
										<input id="arrival_day" name="element_1_2" class="element text" size="1" maxlength="2" value="" type="text"> /
										<label for="element_1_2" class="creamyfont">DD</label>
									</span>
									<span class="creamyfont">
								 		<input id="arrival_year" name="element_1_3" class="element text" size="2" maxlength="4" value="" type="text">
										<label for="element_1_3" class="creamyfont">YYYY</label>
									</span>
									<span id="calendar_1">
										<img id="cal_img_1" class="datepicker calendar" src="images/calendar.gif" alt="Pick a date.">	
									</span>
									<script type="text/javascript">
										Calendar.setup({
										inputField	 : "arrival_year",
										baseField    : "arrival",
										displayArea  : "calendar_1",
										button		 : "cal_img_1",
										ifFormat	 : "%B %e, %Y",
										onSelect	 : selectDate
										});
									</script>

								</td>
								<td>
									<span class="creamyfont">
										<input id="departure_month" name="element_2_1" class="element text" size="1" maxlength="2" value="" type="text"> / 
										<label for="element_2_1" class="creamyfont">MM</label>
									</span>
									<span class="creamyfont">
										<input id="departure_day" name="element_2_2" class="element text" size="1" maxlength="2" value="" type="text"> /
										<label for="element_2_2" class="creamyfont">DD</label>
									</span>
									<span class="creamyfont">
								 		<input id="departure_year" name="element_2_3" class="element text" size="2" maxlength="4" value="" type="text">
										<label for="element_2_3" class="creamyfont">YYYY</label>
									</span>
									<span id="calendar_2">
										<img id="cal_img_2" class="datepicker calendar" src="images/calendar.gif" alt="Pick a date.">	
									</span>
									<script type="text/javascript">
										Calendar.setup({
										inputField	 : "departure_year",
										baseField    : "departure",
										displayArea  : "calendar_2",
										button		 : "cal_img_2",
										ifFormat	 : "%B %e, %Y",
										onSelect	 : selectDate
										});
									</script>
								</td>
							</tr>
							<tr>
								<td class="form_label">Rooms</td>
								<td class="form_label">Guests</td>
							</tr>
							<tr>
								<td>
									<select id="rooms" name="rooms">
									  <option value="1">1</option>
									  <option value="2">2</option>
									  <option value="3">3</option>
									  <option value="4">4</option>
									  <option value="5">5</option>
									  <option value="6">6</option>
									  <option value="7">7</option>
									  <option value="8">8</option>
									  <option value="9">9</option>
									  <option value="10">10</option>
									</select>
								</td>
								<td>
									<select id="guests" name="guests">
									  <option value="1">1</option>
									  <option value="2">2</option>
									  <option value="3">3</option>
									  <option value="4">4</option>
									  <option value="5">5</option>
									  <option value="6">6</option>
									  <option value="7">7</option>
									  <option value="8">8</option>
									  <option value="9">9</option>
									  <option value="10">10</option>
									</select>
								</td>
							</tr>
							<tr>
								<td></td>
								<td><a href="#" class="floatright creamybutton" id="search">Find</a></td>
							</tr>
						</table>
						</div>
				</form>
			</div>
		</div>
		<div class="featured">
			<ul class="clearfix">
				<li>
					<div class="frame1">
						<div class="box">
							<img src="images/swimmingpool.jpg" alt="Img" height="130" width="250">
						</div>
						<a href="facilities.html" class="creamybutton_fixsize">Swimming Pool</a>
					</div>
				</li>
				<li>
					<div class="frame1">
						<div class="box">
							<img src="images/gym.png" alt="Img" height="130" width="250">
						</div>
						<a href="gym.html" class="creamybutton_fixsize">Gym</a>
					</div>
				</li>
				<li>
					<div class="frame1">
						<div class="box">
							<img src="images/golf.png" alt="Img" height="130" width="250">
						</div>
						<a href="golf.html" class="creamybutton_fixsize">Golf</a>
					</div>
				</li>
			</ul>
			<ul class="clearfix">
				<li>
					<div class="frame1">
						<div class="box">
							<img src="images/spa.png" alt="Img" height="130" width="250">
						</div>
					<a href="spa.html" class="creamybutton_fixsize">Spa</a>
					</div>
				</li>
				<li>
					<div class="frame1">
						<div class="box">
							<img src="images/car.png" alt="Img" height="130" width="250">
						</div>
						<a href="car.html" class="creamybutton_fixsize">Car Rental</a>
					</div>
				</li>
				<li>
					<div class="frame1">
						<div class="box">
							<img src="images/casino.png" alt="Img" height="130" width="250">
						</div>
						<a href="casino.html" class="creamybutton_fixsize">Casino</a>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div id="footer">
		<div id="footnote">
			<div class="clearfix">
				<p>
					© Copyright 2013 Alexandra Ringaile Valery Yasmin. All Rights Reserved.
				</p>
			</div>
		</div>
	</div>
</body>
</html>